<script>
import persistence from "@/store/persistence"

//半屏模式时展示的遮罩层指引
export default {
  name: "embeddedGuidelinesMusk",
  data() {
    return {
      isEmbeddedEnv: false,
      hasShow: false,
    }
  },
  created() {
    const enterOptions = wx.getEnterOptionsSync()
    this.isEmbeddedEnv = enterOptions.apiCategory === "embedded"
    this.hasShow = persistence.hasShowEmbeddedGuidelines.get()
    wx.onEmbeddedMiniProgramHeightChange(() => {
      if (this.hasShow) {
        persistence.hasShowEmbeddedGuidelines.set(true)
      }
      this.hasShow = true
    })
  },
  methods: {
    hide() {
      this.hasShow = true
      persistence.hasShowEmbeddedGuidelines.set(true)
    },
  },
}
</script>

<template>
  <view class="component" v-if="isEmbeddedEnv && !hasShow">
    <image class="image" src="https://kou.gdzmtech.com/pic/20240425140105%20.png" mode="widthFix"></image>
    <view class="confirm-btn" @click="hide">我知道了</view>
  </view>
</template>

<style scoped lang="scss">
.component {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 150;
  .image {
    position: fixed;
    top: 40rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
  }
  .confirm-btn {
    position: fixed;
    bottom: 20vh;
    left: 50%;
    transform: translateX(-50%);
    border: 4rpx solid #fff;
    font-size: 34rpx;
    color: #fff;
    padding: 30rpx 80rpx;
    border-radius: 60rpx;
  }
}
</style>
